<template>
  <div class="app-container">
    <section>
      <span
        style="font-size:20px;font-weight: bold; display:block;margin-bottom: 20px;text-align: center;"
      >修改登录密码</span>
      <div class="app-container common-list-page">
        <el-form
          :model="resetForm"
          :rules="resetFormRules"
          ref="resetForm"
          status-icon
          label-width="100px">
          <el-form-item label="旧密码：" prop="password">
            <el-input type="password" v-model="resetForm.password" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码：" v-if="visible" prop="newpwd">
            <el-input type="password" v-model="resetForm.newpwd" auto-complete="off">
              <i
                slot="suffix"
                title="显示密码"
                @click="changePass('show')"
                style="cursor:pointer;"
                class="el-input__icon iconfont icon-xianshi"
              ></i>
            </el-input>
          </el-form-item>

          <el-form-item label="新密码：" v-else prop="newpwd">
            <el-input type="password" v-model="resetForm.newpwd" auto-complete="off">
              <i
                slot="suffix"
                title="隐藏密码"
                @click="changePass('hide')"
                style="cursor:pointer;"
                class="el-input__icon iconfont icon-yincang"
              ></i>
            </el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="newpassword1">
            <el-input type="password" v-model="resetForm.newpassword1" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.native.prevent="UpdatePassword()">确认修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </section>
  </div>
</template>

<script>
import { UpdatePassword } from "@/api/api";
import Config from "../../api/config";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (!value) {
        this.validated = false;
        callback(new Error("请输入新密码"));
      } else if (value.toString().length < 6 || value.toString().length > 18) {
        this.validated = false;
        callback(new Error("密码长度为6-18位"));
      } else {
        this.validated = true;
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        this.validated = false;
        callback(new Error("请再次输入密码"));
      } else if (value !== this.resetForm.newpwd) {
        this.validated = false;
        callback(new Error("两次输入密码不一致!"));
      } else {
        this.validated = true;
        callback();
      }
    };

    return {
      validated: true,
      visible: true,
      resetForm: {
        //传给后台所需要的参数
        newpassword1: "",
        password: "",
        newpwd: ""
      },

      resetFormRules: {
        password: [
          { required: true, message: "请输入旧密码", trigger: "blur" }
        ],
        newpwd: [{ required: true, validator: validatePass, trigger: "blur" }],
        newpassword1: [
          { required: true, validator: validatePass2, trigger: "blur" }
        ]
      }
    };
  },
  created() {},
  methods: {
    changePass(value) {
      this.visible = !(value === "show");
    },
    //修改密码
    UpdatePassword() {
      var self = this;
      if (!this.validated) {
        this.$message({
          message: "请检查输入是否正确",
          type: "error"
        });
        return;
      }
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        OldPassword: this.resetForm.password,
        NewPassword: this.resetForm.newpassword1
      };
      UpdatePassword(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          this.$message({
            message: res.data.Description,
            type: "success"
          });
          return;
        }
      });
    }
  }
};
</script>


<style lang="scss" scoped>
.el-form {
  width: 60%;
  margin: 50px auto 0;
  text-align: center;
  button {
    margin: 20px 0 0;
  }
}
</style>
